<!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">

		<title>SVGs beyond mere shapes</title>

		<meta name="description" content="SVGs beyond mere shapes">
		<meta name="author" content="Nadieh Bremer">

		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">

		<link rel="stylesheet" href="css/reveal.css">
		<link rel="stylesheet" href="css/style.css" id="theme">

		<!-- Code syntax highlighting -->
		<link rel="stylesheet" href="lib/css/monokai-sublime.css">
		<!-- <link rel="stylesheet" href="lib/css/foundation.css"> -->

		<!-- Google fonts -->
		<link href='https://fonts.googleapis.com/css?family=Sue+Ellen+Francisco' rel='stylesheet' type='text/css'>
		<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
		<link href='https://fonts.googleapis.com/css?family=Bad+Script' rel='stylesheet' type='text/css'>
		<link href='https://fonts.googleapis.com/css?family=Bangers' rel='stylesheet' type='text/css'>
		<link href='https://fonts.googleapis.com/css?family=Cardo:400,400italic,700' rel='stylesheet' type='text/css'>

		<!-- Printing and PDF exports -->
		<script>
			var link = document.createElement( 'link' );
			link.rel = 'stylesheet';
			link.type = 'text/css';
			link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
			document.getElementsByTagName( 'head' )[0].appendChild( link );
		</script>

		<!--[if lt IE 9]>
		<script src="lib/js/html5shiv.js"></script>
		<![endif]-->
	</head>

	<body>

		<div class="reveal">

			<!-- Any section element inside of this container is displayed as a slide -->
			<div class="slides">

				<!-- Introduction -->
				<section data-external="slides/slide_00/beforeStarting.html"></section>
				<section data-external="slides/slide_01/titleSlide.html"></section>
				
				<section data-external="slides/slide_02/astronomy.html"></section>
				<section data-external="slides/slide_47/jobSlide.html"></section>
				<section data-external="slides/slide_51/dutchPainters.html"></section>
				<section data-external="slides/slide_45/sketchExampleBatplot.html"></section>
				<section data-external="slides/slide_46/sketchExampleRadial.html"></section>
				<section data-external="slides/slide_48/differentExamples.html"></section>
				<section data-external="slides/slide_52/d3VizFromSVG.html"></section>
				
				<!-- SVG Gradients -->
				<!-- Linear Gradients -->
				<section data-external="slides/slide_04/gradientIntro.html"></section>
				<section data-external="slides/slide_22/trafficAccidents.html"></section>
				<section data-external="slides/slide_21/legendCodeOrientation.html"></section>
				<section data-external="slides/slide_18/legendCodeTwo.html"></section>
				<section data-external="slides/slide_19/legendCodeMulti.html"></section>
				<section data-external="slides/slide_20/legendCodeMultiShort.html"></section>
				<section data-external="slides/slide_03/smoothLegend.html"></section>
				<section data-external="slides/slide_23/weatherRadial.html"></section>

				<!-- Data based Gradients - Color -->
				<section data-external="slides/slide_05/planetsIntro.html"></section>
				<section data-external="slides/slide_16/planetsCode.html"></section>
				<section data-external="slides/slide_17/starsHRDiagram.html"></section>

				<!-- Data based Gradients - Orientation -->
				<section data-external="slides/slide_08/orientationIntro.html"></section>
				<section data-external="slides/slide_10/orientationGrey.html"></section>
				<section data-external="slides/slide_13/orientationGradientCode.html"></section>
				<section data-external="slides/slide_14/orientationColorHex.html"></section>
				<section data-external="slides/slide_09/orientationFinal.html"></section>

				<!-- Focus + Context slider Gradient -->
				<section data-external="slides/slide_25/sliderIntro.html"></section>
				<section data-external="slides/slide_24/babyNamesFinal.html"></section>
				<section data-external="slides/slide_58/sliderMoveCode.html"></section>
				<section data-external="slides/slide_56/growthBMI.html"></section>

				<!-- Animated Gradient -->
				<section data-external="slides/slide_40/animatedGradientIntro.html"></section>
				<section data-external="slides/slide_57/sankeyExample.html"></section>
				<section data-external="slides/slide_38/stretchedChord.html"></section>
				<section data-external="slides/slide_39/stretchedChordFinal.html"></section>
				<section data-external="slides/slide_41/animatedGradientCode.html"></section>
				<section data-external="slides/slide_55/minard.html"></section>

				<!-- SVG filters -->
				<section data-external="slides/slide_54/filterCode.html"></section>

				<!-- SVG Glow effect -->
				<section data-external="slides/slide_32/glowIntro.html"></section>
				<section data-external="slides/slide_33/radarChart.html"></section>
				<section data-external="slides/slide_35/glowCode.html"></section>
				<section data-external="slides/slide_34/spiroGraph.html"></section>

				<!-- SVG Fuzzy / Motion blur effect -->
				<section data-external="slides/slide_44/fuzzyIntro.html"></section>
				<section data-external="slides/slide_42/fuzzyCode.html"></section>
				<section data-external="slides/slide_43/animalSpeeds.html"></section>

				<!-- SVG Gooey effect -->
				<section data-external="slides/slide_06/gooeyIntro.html"></section>
				<section data-external="slides/slide_30/gooeyGolf.html"></section>
				<section data-external="slides/slide_31/gooeyCode.html"></section>
				<section data-external="slides/slide_29/biggestCities.html"></section>
				<section data-external="slides/slide_28/collisionDetection.html"></section>

				<!-- CSS color addition effect -->
				<section data-external="slides/slide_07/colorAddIntro.html"></section>
				<section data-external="slides/slide_37/colorAddBlendModes.html"></section>
				<section data-external="slides/slide_59/cityTemperatures.html"></section>
				<section data-external="slides/slide_60/slopegraphAnimals.html"></section>
				<section data-external="slides/slide_36/colorAddCode.html"></section>

				<!-- End Slide -->
				<section data-external="slides/slide_49/endSlide.html"></section>
				<section data-external="slides/slide_50/afterEnding.html"></section>

			</div>

		</div>

		<!-- REVEAL -->
		<script src="lib/js/head.min.js"></script>
		<script src="js/reveal.js"></script>

		<!-- JQUERY -->
		<script src="js/jquery-1.12.0.min.js"></script>
		<!-- <script src="//code.jquery.com/jquery-1.12.0.min.js"></script> -->

		<!-- UNDERSCORE -->
		<script src="js/underscore.js"></script>

        <!-- D3 -->
		<script src="js/d3.v5.min.js"></script>
		<script> const d5 = d3; </script>
		<script src="js/d3.min.js"></script>
		<script src="js/d3.hexbin.v0.min.js"></script>
		<!-- <script src="http://d3js.org/topojson.v0.min.js"></script> -->

		<!-- REVEAL TO D3 -->
		 <script src="js/reveal-to-d3-config.js"></script>
		 <script src="js/reveal-to-d3.js"></script>

		<!-- NADIEH'S D3 SCRIPTS -->

		<!-- Some helper functions that are used by several D3 scripts -->
		<script src="js/helperFunctions.js"></script>

		<!-- Introduction -->
		<script src="slides/slide_01/titleSlide.js"></script>

		<!-- SVG Gradients -->
		<!-- Linear Gradients -->
		<script src="slides/slide_04/gradientIntro.js"></script>
		<script src="slides/slide_03/smoothLegend.js"></script>
		<script src="slides/slide_21/legendCodeOrientation.js"></script>
		<script src="slides/slide_18/legendCodeTwo.js"></script>
		<script src="slides/slide_19/legendCodeMulti.js"></script>
		<script src="slides/slide_20/legendCodeMultiShort.js"></script>
		<script src="slides/slide_22/trafficAccidents.js"></script>
		<script src="slides/slide_22/accidents.js"></script>
		<script src="slides/slide_23/weatherNewYork.js"></script>
		<script src="slides/slide_23/weatherRadial.js"></script>

		<!-- Data based Gradients - Color -->
		<script src="slides/slide_05/planetsIntro.js"></script>
		<script src="slides/slide_05/exoplanets.js"></script>
		<script src="slides/slide_16/planetsCode.js"></script>
		<script src="slides/slide_17/starsHRDiagram.js"></script>
		<script src="slides/slide_17/starsSample.js"></script>

		<!-- Data based Gradients - Orientation -->
		<script src="slides/slide_08/orientationIntro.js"></script>
		<script src="slides/slide_10/orientationGrey.js"></script>
		<script src="slides/slide_14/orientationColorHex.js"></script>
		<script src="slides/slide_09/orientationFinal.js"></script>

		<!-- Focus + Context slider Gradient -->
		<script src="slides/slide_24/girl_names_us.js"></script>
		<script src="slides/slide_25/sliderIntro.js"></script>
		<script src="slides/slide_24/babyNamesFinal.js"></script>
		<script src="slides/slide_58/sliderMoveCode.js"></script>
		<script src="slides/slide_56/bmi.js"></script>
		<script src="slides/slide_56/growthBMI.js"></script>

		<!-- Animated Gradient -->
		<script src="slides/slide_40/animatedGradientIntro.js"></script>
		<script src="slides/slide_57/sankey.js"></script>
		<script src="slides/slide_57/sankeyExample.js"></script>
		<script src="slides/slide_38/stretchedChord.js"></script>
		<script src="slides/slide_39/stretchedChordFinal.js"></script>
		<script src="slides/slide_41/animatedGradientCode.js"></script>
		<script src="slides/slide_55/minard.js"></script>

		<!-- SVG filters -->
		<!-- SVG Glow effect -->
		<script src="slides/slide_32/glowIntro.js"></script>
		<script src="slides/slide_33/radarChart.js"></script>
		<script src="slides/slide_35/glowCode.js"></script>
		<script src="slides/slide_34/spiroGraph.js"></script>

		<!-- SVG Fuzzy / Motion blur effect -->
		<script src="slides/slide_44/fuzzyIntro.js"></script>
		<script src="slides/slide_42/fuzzyCode.js"></script>
		<script src="slides/slide_43/animalSpeeds.js"></script>

		<!-- SVG Gooey effect -->
		<script src="slides/slide_06/gooeyIntro.js"></script>
		<script src="slides/slide_30/gooeyGolf.js"></script>
		<script src="slides/slide_31/gooeyCode.js"></script>
		<script src="slides/slide_29/countriesMap.js"></script>
		<script src="slides/slide_29/populations.js"></script>
		<script src="slides/slide_29/biggestCities.js"></script>
		<script src="slides/slide_28/collisionDetection.js"></script>
		
		<!-- CSS color addition effect -->
		<script src="slides/slide_07/colorAddIntro.js"></script>
		<script src="slides/slide_37/colorAddBlendModes.js"></script>
		<script src="slides/slide_59/cityTemperatures.js"></script>
		<script src="slides/slide_60/slopegraphAnimals.js"></script>
		<script src="slides/slide_36/colorAddCode.js"></script>

		<!-- End Slide -->
		<script src="slides/slide_49/endSlide.js"></script>

		<!-- REVEAL INIT -->
		<script>

			// Full list of configuration options available at:
			// https://github.com/hakimel/reveal.js#configuration
			Reveal.initialize({
				controls: false,
				progress: false,
				history: true,
				center: true,
				// The "normal" size of the presentation, aspect ratio will be preserved
			    // when the presentation is scaled to fit different resolutions. Can be
			    // specified using percentage units.
			    width: 1920, //'100%', 
			    height: 1080, //'100%', 
			    // Factor of the display size that should remain empty around the content
    			margin: 0,
				// Bounds for smallest/largest possible scale to apply to content
    			minScale: 0.2,
    			maxScale: 4,

				transition: 'fade', // none/fade/slide/convex/concave/zoom

				// Optional reveal.js plugins
				dependencies: [
					{ src: 'plugin/external/external.js', condition: function() { return !!document.querySelector( '[data-external]' ); } },
					{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
					{ src: 'plugin/highlight/highlight.js', async: false, callback: function() { hljs.initHighlightingOnLoad(); } },
					{ src: 'plugin/zoom-js/zoom.js', async: true },
					{ src: 'plugin/notes/notes.js', async: true }
				]
			});

		</script>

	</body>
</html>
